<template>
	<div class="page">
		<div class="top">
			<el-table :cell-style="cellStyle" :header-cell-class-name="cellHeadStyle" :data="dataList" size="small"
				height="300px" v-loading="loading">
				<el-table-column prop="vars.title" min-width="180px" show-overflow-tooltip label="标题" align="center">
					<template slot-scope="scope">
						<el-link type="primary" :underline="false" v-if="scope.row.status === 'todo'"
							@click="todo(scope.row)">{{ scope.row.vars.title }}</el-link>
						<span v-else>{{ scope.row.vars.title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="processDefinitionName" label="名称" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="vars.userName" label="发起人" align="center" show-overflow-tooltip>
				</el-table-column>
				<!-- <el-table-column prop="task.name" label="当前环节">
					<template slot-scope="scope">
						<el-tag size="mini">{{scope.row.task.name}}</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="task.createTime" show-overflow-tooltip label="创建时间">
					<template slot-scope="scope">
						{{ scope.row.task.createTime | formatDate }}
					</template>
				</el-table-column>
				<!-- <el-table-column fixed="right" :key="Math.random()" width="200" label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-edit" @click="todo(scope.row)">办理</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-size="pageSize" :total="total" background layout="total, prev, pager, next">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import tableStyles from '../../utils/mixins.js'
// import FlowChart from '../modeler/FlowChart'
import pick from 'lodash.pick'
import UserSelect from '@/components/userSelect/UserSelectDialog'
export default {
	inject: ['reload'],
	mixins: [tableStyles],
	data() {
		return {
			searchForm: {
				beginDate: '',
				endDate: ''
			},
			searchDates: '',
			dataList: [],
			pageNo: 1,
			pageSize: 8,
			total: 0,
			loading: false,
			visible: false,
			currentTask: null,
			dataListSelections: [],
			processInstanceId: '',

		}
	},
	activated() {
		this.refreshList()
	},
	components: {
		UserSelect
		// FlowChart
	},
	methods: {
		// 获取数据列表
		refreshList() {
			this.loading = true
			this.$http({
				url: '/flowable/task/todo',
				method: 'get',
				params: {
					'pageNo': this.pageNo,
					'pageSize': this.pageSize
				}
			}).then(({
				data
			}) => {
				if (data && data.success) {
					// console.log("222",data)
					this.dataList = data.page.list
					this.total = data.page.count
					this.loading = false
				}
			})
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val
			this.pageNo = 1
			this.refreshList()
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageNo = val
			this.refreshList()
		},
		todo(row) {
			this.reload();
			this.$http.get('/flowable/task/getTaskDef', {
				params: {
					taskId: row.task.id,
					taskName: row.task.name,
					taskDefKey: row.task.taskDefinitionKey,
					procInsId: row.task.processInstanceId,
					procDefId: row.task.processDefinitionId,
					procDefKey: row.task.processDefKey,
					status: row.status
				}
			}).then(({
				data
			}) => {
				if (data.success) {
					this.$router.push({
						path: '/flowable/task/TaskForm',
						// attend:0,作为审批办理,已办时 差旅，非差旅冲销金额回显标识
						query: {
							formTitle: `${row.vars.title}`,
							attend: 0,
							title: `审批【${row.task.name || ''}】`,
							...pick(data.flow, 'formType', 'formReadOnly', 'formUrl', 'procDefKey',
								'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title',
								'businessId')
						}
					})
				}
			})
		},
	}
}
</script>
